<template>
  <div class="czm-timer-box-wrapper">
    <div class="czm-timer-box">
      <div class="flex-column-center">
        <div>
          <a class="datetime-item">{{ date.YYYY }}</a>
          年
          <a class="datetime-item">{{ date.MM }}</a>
          月
          <a class="datetime-item">{{ date.DD }}</a>
          日
        </div>
        <div>
          <a class="datetime-item">{{ date.HH }}</a>
          时
          <a class="datetime-item">{{ date.mm }}</a>
          分
          <a class="datetime-item">{{ date.ss }}</a>
          秒
        </div>
      </div>
      <a class="datetime-reset" title="重置到当前时间" @click="resetCurrTime"><HistoryOutlined /></a>
    </div>
    <div class="czm-timer-settings" v-if="clock">
      <slider-bar title="加速" titleWidth="3em" v-model:value="multiplier" :min="slider.min" :max="slider.max" :step="slider.step" />
    </div>
  </div>
</template>

<script lang="ts">
import { JulianDate, defined } from '@cesiumjs';
import { SliderBar } from '@components/widgets';
import {
  PlayCircleOutlined,
  PauseCircleOutlined,
  PlayCircleFilled,
  PauseCircleFilled,
  ReloadOutlined,
  SyncOutlined,
  LoadingOutlined,
  HistoryOutlined
} from '@ant-design/icons-vue';
import { defineComponent, ref, reactive } from 'vue';

export default defineComponent({
  name: 'czm-timer-box',
  components: { PlayCircleOutlined, PauseCircleOutlined, SyncOutlined, ReloadOutlined, LoadingOutlined, HistoryOutlined, SliderBar },
  setup(props, context) {
    return { eventListener: null };
  },
  props: {
    playing: {
      type: Boolean,
      default: true
    },
    options: {
      type: Object,
      default() {
        return { multiplier: 1 };
      }
    },
    sliderOption: {
      type: Object,
      default() {
        return {};
      }
    },
    viewerSource: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      mp: 0,
      date: {}
    };
  },
  computed: {
    viewer() {
      return this.viewerSource && this.viewerSource.viewer;
    },
    clock() {
      return this.viewer && this.viewer.clock;
    },
    slider() {
      return { min: 0, max: 3600 * 24, step: 100, ...this.sliderOption };
    },
    multiplier: {
      get() {
        const { clock, playing, mp } = this;
        if (clock) {
          return playing ? clock.multiplier : mp;
        }
      },
      set(val) {
        const { clock, playing } = this;
        if (playing) {
          clock.multiplier = this.mp = val;
        } else {
          this.mp = val;
        }
      }
    }
  },
  watch: {
    viewer: {
      handler(newVal, oldVal) {
        newVal && this.init(newVal);
      },
      immediate: true //true就表示会立即执行
    },
    options: {
      handler(newVal, oldVal) {
        this.mp = newVal.multiplier || 1;
        newVal && this.updateClock();
      },
      immediate: true //true就表示会立即执行
    },
    playing: {
      handler(newVal, oldVal) {
        console.log('playing', newVal);
        const { clock } = this;
        if (clock) {
          console.log('updateClock');
          if (!newVal && clock) {
            this.mp = clock.multiplier;
            this.updateClock();
            clock.multiplier = 0;
          } else {
            this.updateClock();
            clock.multiplier = this.mp;
          }
        }
      },
      immediate: true //true就表示会立即执行
    }
  },
  mounted() {
    console.log('czm-timer-box');
  },
  beforeUnmount() {
    let { clock, onTick } = this;
    this.eventListener && clock.onTick.removeEventListener(onTick);
    this.eventListener = null;
  },
  methods: {
    init(viewer) {
      let { clock, playing } = this;
      this.eventListener = clock.onTick.addEventListener(this.onTick);
      this.updateClock();
    },
    updateClock() {
      const { options, clock, playing } = this;
      if (clock) {
        Object.keys(options).forEach(k => {
          const val = options[k];
          defined(val) && (clock[k] = val);
        });
        if (!playing) {
          clock.multiplier = 0;
        }
      }
    },
    onTick() {
      const moment = this.$moment(JulianDate.toDate(this.clock.currentTime));
      this.date = {
        YYYY: moment.format('YYYY'),
        MM: moment.format('MM'),
        DD: moment.format('DD'),
        HH: moment.format('HH'),
        mm: moment.format('mm'),
        ss: moment.format('ss')
      };
    },
    resetCurrTime() {
      this.clock.currentTime = JulianDate.addHours(JulianDate.now(new Date()), 0, new JulianDate());
    }
  }
});
</script>

<style lang="less">
.czm-timer-box-wrapper {
  // position: absolute;
  // left: 0;
  // bottom: 15px;
  display: flex;
  align-items: stretch;
  // width: 20em;
  // max-width: 100%;
  padding: 0;
  // background-color: rgba(0, 0, 0, 0.75);
  // margin-bottom: 10px;

  .czm-timer-settings {
    display: none;
  }

  .czm-timer-box {
    display: flex;
    // flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    color: gray;
    font-size: 14px;
    line-height: 1.2em;

    // opacity: 0.8;
    background-color: rgba(0, 0, 0, 0.8);

    transition: all 500ms;

    a {
      color: #aaff88;
      font-weight: 600;
    }

    a.datetime-reset {
      padding: 3px;
      margin: 0 0 0 3px;
      color: #fff;
      font-size: 22px;
      transition: all 500ms;
      &:hover {
        color: #8ff;
        font-weight: 600;
      }
      &:active {
        opacity: 0.5;
      }
    }
  }

  .czm-timer-box.show {
    display: flex;
  }
  &:hover {
    .czm-timer-box {
      display: flex;
      // opacity: 1;
      background-color: rgba(0, 0, 0, 0.9);
    }
    .czm-timer-settings {
      display: flex;
      align-items: stretch;
      width: 12em;
      // opacity: 1;
      background-color: rgba(0, 0, 0, 0.9);
    }
  }
}
</style>
